<template>
  <div class="tab-content">
    <div class="tab-panel">
      <h2>每天 60 秒读懂世界</h2>
      <div v-if="newsData.loading" class="loading">
        正在加载新闻...
      </div>
      <div v-else-if="newsData.error" class="error">
        {{ newsData.error }}
      </div>
      <div v-else class="news-content">
        <div class="news-image" v-if="newsData.data?.image">
          <img :src="newsData.data.image" :alt="newsData.data?.title">
        </div>
        <div class="news-list">
          <div class="news-item" v-for="(item, index) in newsData.data?.news" :key="index">
            <span class="rank">{{ index + 1 }}.</span>
            <span class="title">{{ item }}</span>
          </div>
        </div>
        <!-- 添加微语部分 -->
        <div class="micro-saying" v-if="newsData.data?.tip">
          <p>{{ newsData.data.tip }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue';
import { API_BASE_URL } from '../utils/WebConstants.ts';

// 定义组件属性
const props = defineProps<{
  refreshKey?: number;
}>();

const { refreshKey } = toRefs(props);

// 数据状态
const newsData = ref({
  loading: true,
  error: null as string | null,
  data: null as any,
});

// 获取每日新闻
const fetchNews = async () => {
  try {
    newsData.value.loading = true;
    newsData.value.error = null;
    const response = await fetch(`${API_BASE_URL}/60s?encoding=text`);
    const result = await response.text();

    if (response.ok && result) {
      // 解析文本格式的响应
      const lines = result.split('\n').filter((line) => line.trim() !== '');

      // 提取日期和标题
      const dateLine = lines.find(
        (line) => line.includes('（') && line.includes('）')
      );
      const date = dateLine ? dateLine.match(/.*（(.*)）/)?.[1] : '';

      // 提取新闻条目
      const newsLines = lines.filter((line) => /^\d+\. /.test(line));
      const news = newsLines.map((line) => line.replace(/^\d+\. /, ''));

      // 提取微语
      const tipLine = lines.find((line) => line.startsWith('【微语】'));
      const tip = tipLine ? tipLine.replace('【微语】', '') : '';

      newsData.value.data = {
        date: date,
        news: news,
        tip: tip,
      };
    } else {
      newsData.value.error = '获取新闻失败';
    }
  } catch (err) {
    newsData.value.error = '网络错误，请稍后重试';
    console.error('获取新闻时出错:', err);
  } finally {
    newsData.value.loading = false;
  }
};

// 监听刷新键变化
watch(refreshKey, () => {
  fetchNews();
});

onMounted(() => {
  fetchNews();
});
</script>

<style scoped>
.tab-panel h2 {
  text-align: center;
  margin-bottom: 20px;
  color: white;
}

.loading, .error {
  text-align: center;
  padding: 40px 20px;
  font-size: 1.2rem;
}

.loading {
  color: #ccc;
}

.error {
  color: #d32f2f;
}

.news-date {
  text-align: center;
  margin-bottom: 20px;
  color: #ccc;
  font-size: 0.9rem;
}

.news-image {
  text-align: center;
  margin-bottom: 20px;
}

.news-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.news-list {
  background: #2d2d2d;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.news-item {
  padding: 12px 0;
  border-bottom: 1px solid #444;
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-item:last-child {
  border-bottom: none;
}

.rank {
  font-weight: bold;
  color: #42b983;
  min-width: 30px;
}

.title {
  flex: 1;
  color: #ddd;
}

@media (max-width: 768px) {
  .news-list {
    padding: 15px;
  }

  .news-item {
    padding: 8px 0;
    gap: 6px;
  }
}

.micro-saying {
  margin: 30px 0;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  font-style: italic;
  color: #e0e0e0;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.micro-saying p {
  margin: 0;
  font-size: 0.8rem;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 1px;
}

.micro-saying p::before {
  content: "「";
  font-size: 1.8em;
  margin-right: 12px;
  vertical-align: middle;
  font-weight: bold;
}

.micro-saying p::after {
  content: "」";
  font-size: 1.8em;
  margin-left: 12px;
  vertical-align: middle;
  font-weight: bold;
}
</style>